<template>
    <div>
      <!-- <div class="bg-white grid-content">
        <el-form :inline="true" :model="KjxcshrbForm" class="demo-form-inline">
            <el-date-picker style="top:15px"
            v-model="value1"
            type="daterange"
            value-format='yyyy-MM-dd'
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              unlink-panels>
            </el-date-picker>
        <el-form-item>
          <el-button type="primary" @click="reload">查询</el-button>
          <el-button type="success" @click="exportExcel">下载</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="bg-white grid-content">
      <div style="overflow: hidden; ">
        <div class="mytitle"><svg-icon icon-class="Kjxcshrb" class="myIcon" />  矿级形成审核日报</div>

      </div>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
          <el-table-column fixed type="index" label="序号" :index="indexMethod">
          </el-table-column>
          <el-table-column fixed align="center" prop="rq" label="日期">
        </el-table-column>
          <el-table-column  fixed align="center" prop="zyq" label="作业区">
            </el-table-column>
            <el-table-column  fixed align="center" prop="zcb" label="注采班">
            </el-table-column>

            <el-table-column align="center" label="昨日数据">
              <el-table-column align="center" prop="zrjlj" label="计量间">
                <!-- 昨日计量间没有字段 -->
              </el-table-column>
                <el-table-column align="center" label="计量间压力与温度">
                  <el-table-column align="center" prop="zrzcsyl" label="总掺水压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="zrzcswd" label="总掺水温度（℃）">
                  </el-table-column>
                  <el-table-column align="center" prop="zrzhyyl" label="总回油压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="zrzyhwd" label="总回油温度（℃）">
                  </el-table-column>
                </el-table-column>
              <el-table-column align="center" prop="zrjyh" label="集油环">
                <!-- 昨日集油环没有字段 -->
              </el-table-column>
              <el-table-column align="center" label="集油环压力与温度">
                  <el-table-column align="center" prop="zrcsyl" label="掺水压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="zrcswd" label="掺水温度（℃）">
                  </el-table-column>
                  <el-table-column align="center" prop="zrhyyl" label="回油压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="zrhywd" label="回油温度（℃）">
                  </el-table-column>
                </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="今日数据">
              <el-table-column align="center" prop="jlj" label="计量间">
              </el-table-column>
                <el-table-column align="center" label="计量间压力与温度">
                  <el-table-column align="center" prop="zcsyl" label="总掺水压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="zcswd" label="总掺水温度（℃）">
                  </el-table-column>
                  <el-table-column align="center" prop="zhyyl" label="总回油压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="zyhwd" label="总回油温度（℃）">
                  </el-table-column>
                </el-table-column>
              <el-table-column align="center" prop="jyh" label="集油环">
              </el-table-column>
              <el-table-column align="center" label="集油环压力与温度">
                  <el-table-column align="center" prop="csyl" label="掺水压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="cswd" label="掺水温度（℃）">
                  </el-table-column>
                  <el-table-column align="center" prop="csyl" label="回油压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="cswd" label="回油温度（℃）">
                  </el-table-column>
                </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="（今日-昨日）差值">
              <el-table-column align="center" prop="jzrjlj" label="计量间">
              </el-table-column>
                <el-table-column align="center" label="计量间压力与温度">
                  <el-table-column align="center" prop="jzrzcsyl" label="总掺水压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="jzrzcswd" label="总掺水温度（℃）">
                  </el-table-column>
                  <el-table-column align="center" prop="jzrhyyl" label="总回油压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="jzrhywd" label="总回油温度（℃）">
                  </el-table-column>
                </el-table-column>
              <el-table-column align="center" prop="jzrjyh" label="集油环">
              </el-table-column>
              <el-table-column align="center" label="集油环压力与温度">
                  <el-table-column align="center" prop="jzrcsyl" label="掺水压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="jzrcswd" label="掺水温度（℃）">
                  </el-table-column>
                  <el-table-column align="center" prop="jzrhyyl" label="回油压力（MPa)">
                  </el-table-column>
                  <el-table-column align="center" prop="jzrhywd" label="回油温度（℃）">
                  </el-table-column>
                </el-table-column>
            </el-table-column>

            <el-table-column align="center" prop="jh" label="井号">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
            <el-table-column align="center" prop="shr" label="审核人">
            </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <el-pagination align='right'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10, 20, 30, 40, 50]"

            :total="total">
          </el-pagination>
      </div>

      <!-- 弹出框 -->

    </div>
  </template>

  <script>
  import KjxcshrbApi from '@/api/sjtb/scgl/kjxcshrb';
  import Bolb from '@/vendor/Blob';
  import Export2Excel from '@/vendor/Export2Excel';
  import XLSX from 'xlsx-style'

  export default {
    data() {
      return {
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量
        // table数据
        tableData: [],
        searchDate: "",
        //当前页码
        currentPage: 1,
        //表单填报的数据
        KjxcshrbForm: {
          id:'',
          rq: '',//日期
          zyq: '',//作业区
          zcb: '',//注采班

          jlj:'',//计量间
          zrzcsyl: '',//总掺水压力（MPa)
          zrzcswd: '',//总掺水温度（℃）
          zrzhyyl: '',//总回油压力（MPa)
          zrzyhwd: '',//总回油温度（℃）
          jyh: '',//集油环
          zrcsyl: '',//掺水压力（MPa)
          zrcswd:'',//掺水温度（℃)
          zrhyyl:'',//回油压力（MPa)
          zrhywd:'',//回油温度（℃)

          jlj:'',//计量间
          zcsyl: '',//总掺水压力（MPa)
          zcswd: '',//总掺水温度（℃）
          zhyyl: '',//总回油压力（MPa)
          zyhwd: '',//总回油温度（℃）
          jyh: '',//集油环
          csyl: '',//掺水压力（MPa)
          cswd:'',//掺水温度（℃
          hyyl:'',//回油压力（MPa)
          hywd:'',//回油温度（℃)

          jlj:'',//计量间
          jzrzcsyl: '',//总掺水压力（MPa)
          jzrzcswd: '',//总掺水温度（℃）
          jzrzhyyl: '',//总回油压力（MPa)
          jzrzyhwd: '',//总回油温度（℃）
          jyh: '',//集油环
          jzrcsyl: '',//掺水压力（MPa)
          jzrcswd:'',//掺水温度（℃
          jzrhyyl:'',//回油压力（MPa)
          jzrhywd:'',//回油温度（℃)

          jh:'',//井号
          bz:'',//备注
          shr:'',//审核人

          },
        //验证规则
        rules: {
          zyq: [
            { required: true, message: '请输入作业区', trigger: 'blur' },
          ],
          sbmc: [
            { required: true, message: '请输入设备名称', trigger: 'blur' }
          ],
          dw: [
            { required: true, message: '请输入单位', trigger: 'biur' }
          ],
        },
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        //查询日期开始时间
        value1: '',
        //获取当前日期
        currentTime:'',
        //编辑框是否显示
        dialogFormVisible: false,
        //弹出框是否是查看
        ischeck: false,
        //控制查看时不可更改数据
        isInput:false,
        //弹出框标题
        myDialogTitle: '',
      }
    },
    created(){
      this.search();
      this.reload();
    },
    mounted(){
      this.filterTime();
      // this.initDate();
    },
    methods: {
      /**
      * 查询列表
      */
      async search() {
        // this.pageNo = pageNo; //当前页码
        // this.pageSize = pageSize; //每页显示数量
        //发送查询请求
        let res = await KjxcshrbApi.getKjxcshrbcompareList(this.pageNo,this.pageSize,this.approveStatus, this.searchDate[0],this.searchDate[0]);
        //判断是否成功
        if(res.success){
          //赋值
          this.tableData = res.data.records;
          //console.log(this.tableData[0].zyq);
          //总数量
          this.total = res.data.total;
        }
      },
      exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对

        //复杂表头书写
        //添加表格id
        var myindex = [];
        for (var i = 0; i < this.total; i++) {
          myindex[i] = i + 1
        }
        var newindex = myindex.map(item => {
          console.log(item)
          return {
            index: item
          }
        });
         // //将添加的序号加入到表格中形成新的mergeArr表格
        let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
          return prev.map((item, index) => {
            return Object.assign(item, curr[index]);
          });
        });
        console.log('mergeArr', mergeArr);
        console.log('tableData', this.tableData);

        // const tHeader = ['日期', '姓名', '地址'];
        // // 上面设置Excel的表格第一行的标题
        //一级表头
         const multiHeader = [
          [' 矿级形成审核日报','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',],
          ['序号', '日期', '作业区', '注采班', '昨日数据', '','','','','','','','','','今日数据', '','','','','','','','','','（今日-昨日）差值', '','','','','','','','','','井号', '','','','','','','备注', '审核人'],
          ['','','','','计量间','计量间压力与温度','','','','集油环','集油环压力与温度','','','','计量间','计量间压力与温度','','','','集油环','集油环压力与温度','','','','计量间','计量间压力与温度','','','','集油环','集油环压力与温度','','','','','',''],

      ];
         //二级表头
         const header = ['','','','','','总掺水压力（MPa)','总掺水温度（℃）','总回油压力（MPa)','总回油温度（℃）','','掺水压力（MPa)','掺水温度（℃)','回油压力（MPa)','回油温度（℃)','','总掺水压力（MPa)','总掺水温度（℃）','总回油压力（MPa)','总回油温度（℃）','','掺水压力（MPa)','掺水温度（℃)','回油压力（MPa)','回油温度（℃)','','总掺水压力（MPa)','总掺水温度（℃）','总回油压力（MPa)','总回油温度（℃）','','掺水压力（MPa)','掺水温度（℃)','回油压力（MPa)','回油温度（℃)','','','',];

         //表头字段
         const filterVal = ['index', 'rq', 'zyq', 'zcb', 'jlj', 'zrzcsyl', 'zrzcswd', 'zrzhyyl', 'zrzyhwd', 'jyh', 'zrcsyl', 'zrcswd', 'zrhyyl','zrhywd','jlj','zcsyl','zcswd','zhyyl','zyhwd','jyh','csyl','cswd','hyyl','hywd','jlj','jzrzcsyl','jzrzcswd','jzrzhyyl','jzrzyhwd','jyh','jzrcsyl','jzrcswd','jzrhyyl','jzrhywd','jh','bz','shr'];
         //需要合并的单元格
         const merges = ['A1:AQ1',"A2:A4" ,"B2:B4","C2:C4","D2:D4","E2:N2","O2:X2","Y2:AH2","AI2:AO4","AP2:AP4","AQ2:AQ4","E3:E4","F3:I3","J3:J4","K3:N3","O3:O4","P3:S3","T3:T4","U3:X3","Y3:Y4","Z3:AC3","AD3:AD4","AE3:AH3"];
         //表头样式
         let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1','T1','U1','V1','W1','X1','Y1','Z1','AA1','AB1','AC1','AD1','AE1','AF1','AG1','AH1','AI1','AJ1','AK1','AL1','AM1','AN1','AO1','AP1','AQ1','A2','B2','C2','D2','E2','F2','G2','H2','I2','J2','K2','L2','M2','N2','O2','P2','Q2','R2','S2','T2','U2','V2','W2','X2','Y2','Z2','AA2','AB2','AC2','AD2','AE2','AF2','AG2','AH2','AI2','AJ2','AK2','AL2','AM2','AN2','AO2','AP2','AQ2','E3','F3','G3','H3','I3','J3','K3','L3','M3','N3','O3','P3','Q3','R3','S3','T3','U3','V3','W3','X3','Y3','Z3','AA3','AB3','AC3','AD3','AE3','AF3','AG3','AH3','F4','G4','H4','I4','K4','L4','M4','N4','P4','Q4','R4','S4','U4','V4','W4','X4','Z4','AA4','AB4','AC4','AE4','AF4','AG4','AH4'];
        // 上面的index、nickName、name是tableData里对象的属性
        console.log(this.tableData);
        // const list = this.tableData;  //把data里的tableData存到list
        // const data = this.formatJson(filterVal, list);
        const list = mergeArr;
        const data = this.formatJson(filterVal, list);
        console.log(111111);
        console.log(list);
        console.log(data);

        export_json_to_excel({
          //header: tHeader,
          multiHeader:multiHeader,
          header:header,

          merges:merges,
          headerStyle:headerStyle  ,
            data: data,
            filename: ' 矿级形成审核日报',
            autoWidth: true,
            bookType: 'xlsx'
        });//"列表excel"  是下载后的表名 可修改
        this.$message.success('导出报表成功！')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => {
        return filterVal.map(j => v[j])
      })
    },

      /*** 当每页数量发生变化时触发该事件 */
      handleSizeChange(size) {
        console.log(size);
        this.pageSize = size;
        //将每页显示的数量交给成员变量
        this.search(this.pageNo, size);
      },
      /*** 当页码发生变化时触发该事件 */
      handleCurrentChange(page) {
        console.log(page);
        this.pageNo = page;
        //调用查询方法
        this.search(page, this.pageSize);
      },
      // 序号计算
      indexMethod (index) {
      // index默认在0开始，这里+1
        return index + 1 + (this.pageNo - 1) * this.pageSize
      },
      // 获取当前日期
      filterTime() {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? '0' + d : d;
        this.currentTime = y + '-' + m + '-' + d;
      },
      //下载点击事件
      reload() {
      this.tableData = [];

      console.log(1010);
      console.log(this.value1[0]);//value1[0] 开始时间 value1[1] 结束时间
      this.startDate = this.value1[0];
      this.endDate = this.value1[1];
      this.search();
      //  console.log(this.value1[0]);
      //this.$refs.table.reload({ page: 1 });

    },
    }
  }
  </script>

  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
  }

  //按钮组
  .myButtons {
    float: right
  }

  //格子的样式
  .bg-white {
    background: #ffffff;
  }

  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .calendar ::v-deep .el-button-group::before {
    display: none;
  }

  .calendar ::v-deep .el-button-group::after {
    display: none;
  }

  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }

  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }

  //表单禁用字体样式
  .el-input.is-disabled ::v-deep .el-input__inner {
      color: #606266;
    }
  //对话框宽度
  // .customWidth{
  //         width:80%;
  //     }
  ::v-deep .saveAsDialog {
    width: 60% !important;
  }
  </style>
